<template>
  <div class="print-wrap">
    <div class="flex-row head">
      <div>添加打印机</div>
      <el-button type="primary" class="btn" size="mini" @click="openAddPrintDialog()">新增</el-button>
    </div>
    <div class="base-table-wrap" style="min-height: 400px">
      <el-table :data="printList">
        <el-table-column prop="memo" label="打印机名称" min-width="100px" align="left"></el-table-column>
        <el-table-column prop="sn" label="sn码" min-width="80px" align="left"></el-table-column>
        <el-table-column prop="key" label="key码" min-width="80px" align="left"></el-table-column>
        <el-table-column label="是否有效" align="left" min-width="80px">
          <template slot-scope="scope">
            {{scope.row.activated ? '是否有效' : '无效'}}
          </template>
        </el-table-column>
        <el-table-column label="是否播放" align="left" min-width="80px">
          <template slot-scope="scope">
            {{scope.row.withsound ? '播放' : '不播放'}}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="220">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="deletePrint(scope.row.id)">删除</el-button>
            <el-button type="text" class="el-text-check" size="mini" @click="isPresence(scope.row)">是否存在?</el-button>
            <el-button type="text" class="el-text-check" size="mini" @click="isPrintOnlie(scope.row)">是否在线?</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pt-table-loading v-show="isloadingTable"></pt-table-loading>
      <div class="print-msg" style="line-height: 50px;" v-if="printMsg">{{printMsg}}</div>
    </div>
    <el-dialog :modal="false" title="添加打印机" v-dialogDrag :visible.sync="addPrintVisiblel" width="400px">
      <div class="point">打印机的sn码和key在打印机的底部标签上！</div>
      <el-form :model="params" ref="ruleForm" label-width="100px" size="small">
        <el-form-item label="打印机名称" prop="memo" :rules="[{required: true, message: '请输入打印机名称', trigger: 'blur'}]">
          <el-input v-model="params.memo"></el-input>
        </el-form-item>
        <el-form-item label="打印机sn码" prop="sn" :rules="[{required: true, message: '请输入打印机sn码', trigger: 'blur'}]">
          <el-input v-model="params.sn"></el-input>
        </el-form-item>
        <el-form-item label="打印机key" prop="key" :rules="[{required: true, message: '请输入打印机key码', trigger: 'blur'}]">
          <el-input v-model="params.key"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" v-loading="saveAddPrint" @click="addPrint('ruleForm')">新增</el-button>
          <el-button size="mini" @click="addPrintVisiblel = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    props: {
      busniessId: '', // 上级id
      autoprint: '' // 是否开启wifi打印机
    },
    data() {
      return {
        printMsg: '', // 查询信息
        printList: [], // 打印机列表
        params: { // 添加打印机数据
          sn: '',
          key: '',
          memo: ''
        },
        saveAddPrint: false, // 保存等待
        addPrintVisiblel: false, // 添加打印机弹窗
        isloadingTable: false // 请求等待
      }
    },
    computed: {
      autoprints() {
        return this.autoprint ? this.autoprint : false
      }
    },
    methods: {
      isPresence(item) { // 检查打印是否存在
        const params = new FormData()
        params.append('printerId', item.id)
        this.$http.post('/server/printer//test_printer', params).then(res => {
          if (res.data.success) {
            this.printMsg = `查询结果：打印机【${item.memo}】${res.data ? '存在': '不存在'}`
          }
        })
      },
      isPrintOnlie(item) { // 检查打印机是否在线
        this.$http.get('/server/printer/is_online?printerId=' + item.id).then(res =>{
          if (res.data.success) {
            this.printMsg = `查询结果：打印机【${item.memo}】${res.data.data.isOnline ? '在线': '不在线'}`
          }
        })
      },
      openAddPrintDialog() { // 打开添加打印机弹窗
        this.params = this.$options.data().params
        this.addPrintVisiblel = true
      },
      addPrint(formName) { // 添加打印机
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const params = {...this.params }
            params.businessid = this.busniessId
            this.saveAddPrint = true
            this.$http.post('/server/printer/addPrinter',JSON.stringify(params)).then(res =>{
              if(res.data.success) {
                this.$message('添加成功')
                this.addPrintVisiblel = false
                this.getTableList()
              }
            }).finally(() => { this.saveAddPrint = false })
          }
        })
      },
      deletePrint(id) { // 删除打印机
        this.$confirm(`确定移除当前打印机？`).then(() => {
          const eva = new FormData()
          eva.append('printerId',id)
          this.$http.post('/server/printer/del',eva).then(res =>{
            if (res.data.success) {
              this.getTableList()
            }
          })
        })
      },
      getTableList() { // 获取打印机key
        this.isloadingTable = true
        this.$http.get( '/server/printer/list?busId=' + this.busniessId).then(res => {
         if(res.data.success) {
           this.printList = res.data.data
         }
        }).finally(() => { this.isloadingTable = false })
      }
    },
    created() {
      this.getTableList()
    }
  }
</script>

<style lang="scss" scoped>
  .print-wrap{
    .head{
      height: 60px;
      justify-content: space-between;
    }
    .point{
      padding: 5px 10px;
      margin-bottom: 10px;
      background: #ffe9a4;
    }
  }

</style>
